<template>
	<div class="md-product" :style="{marginTop: value.margin + 'px', padding: value.paddingy + 'px ' + value.paddingx + 'px'}">
		<div class="md-product-cell" v-for="(item, index) in value.number" :key="index">
			<div class="image">
				<span
					class="superscript"
					v-show="value.showSub"
					:class="styleClassName[value.subStyle]"
					:style="{color: value.subTextColor, backgroundColor: value.subBgColor}"
				>
					<span v-if="value.subText == 4">{{value.subTextCustom}}</span>
					<span v-else>{{subTexts[value.subText]}}</span>
				</span>
			</div>
			<div class="content">
				<h4 class="title">商品标题，最多占一行，超出部分省略</h4>
				<div class="text">
					<span class="price" :style="{color: value.priceColor}">￥<b>2899</b>.00</span>
					<span class="sale" v-show="value.showNumber">销量：0</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'productContent',
	props: {
		value: Object
	},
	data() {
		return {
			styleClassName: ['style-1', 'style-2', 'style-3', 'style-4'],
			subTexts: ['促销', '推荐', '新上', '热销']
		}
	}
}
</script>

<style>
</style>